<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>文字时钟</title>
    <script src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="clock">
    <div class="s"
         v-bind:class="{xx:60-v==s}"
         v-for="(v,k) in 60"
         v-bind:style="{transform:'translate('+xc(sr,v+s,60)+'px,'+yc(sr,v+s,60)+'px) rotate('+dg(v+s,60)+'deg)'}">
        {{zh(60-v,1)}}秒
    </div>

    <div class="i" v-for="(v,k) in 60"
         v-bind:class="{xx:60-v==i}"
         v-bind:style="{transform:'translate('+xc(ir,v+i,60)+'px,'+yc(ir,v+i,60)+'px) rotate('+dg(v+i,60)+'deg)'}">
        {{zh(60-v,1)}}分
    </div>

    <div class="h hs" v-for="(v,k) in 12"
         v-bind:class="{xx:12-v==h}"
         v-bind:style="{transform:'translate('+xc(hr,v+h,12)+'px,'+yc(hr,v+h,12)+'px) rotate('+dg(v+h,12)+'deg)'}">
        {{zh(12-v,1)}}点
    </div>
    <div class="y">
        <span style="font-size:50px;position: relative;top: -25px;left: -25px;">{{displayH}}:{{displayM}}</span>
        <div style="margin-left:-30px;margin-top: -30px;">
            {{dispalyMonth}}.{{displayD}} 星期{{displayW}}
        </div>
        <el-button class="login" type="primary" size="small" @click="login">登录</el-button>
    </div>

</div>
<script>
    var mv = new Vue({
        el: '#clock',
        data: {
            PI: Math.PI,
            displayH: 0,
            displayM: 0,
            dispalyMonth: 0,
            displayW: '',
            displayD: 0,
            s: 0,
            i: 0,
            h: 0,
            d: 0,
            m: 0,
            y: 0,
            w: 0,
            sr: 500,
            ir: 400,
            hr: 250,
            wk: ['日', '一', '二', '三', '四', '五', '六'],
            openLogin:'true'
        },
        created() {
            setInterval(() => {
                var date = new Date()
                this.y = date.getFullYear()
                this.m = date.getMonth() + 1
                this.dispalyMonth = this.m < 10 ? '0' + this.m : this.m;
                this.d = date.getDate()
                this.displayD = this.d < 10 ? '0' + this.d : this.d;
                this.w = date.getDay()
                this.h = date.getHours()
                this.h = this.h < 12 ? this.h : this.h - 12;
                this.i = date.getMinutes()
                this.s = date.getSeconds()
                // console.log(this.h, 333)
                Math.cos()
                this.displayH = this.h < 10 ? '0' + this.h : this.h
                this.displayM = this.i < 10 ? '0' + this.i : this.i
                this.displayW = this.wk[this.w];

                // console.log(this.displayW,111)
            }, 1000)
        },
        mounted(){
          this.isOpenLogin();
        },
        methods: {
            login(){
                window.sessionStorage.setItem("dialogFormVisible", true)
            },
            isOpenLogin(){
                let openLogin = window.sessionStorage.getItem("openLogin");
                if (openLogin){
                    this.openLogin = openLogin;
                }
            },
            xc(r, k, l) {
                return r * Math.cos(2 * k * this.PI / l)
            },
            yc(r, k, l) {
                return r * Math.sin(2 * k * this.PI / l)
            },
            dg(k, l) {
                return k * 360 / l
            },
            zh(num, type) {
                switch (type) {
                    case 1:
                        var t1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
                        var sw = parseInt(num / 10)
                        var gw = num % 10
                        return (sw != 0 ? t1[sw] + '十' : '') + (gw != 0 ? t1[gw] : (sw == 0 ? t1[0] : ''))
                        break
                }
            }
        }
    })
</script>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #384b5c;
    }

    #clock {
        width: 100%;
        height: 100%;
        position: relative;
        transform: scale(0.5, 0.5);
        top: 450px;
    }

    .s, .i, .h, .w, .d, .m, .y {
        position: absolute;
        top: 50%;
        left: 50%;
        transition: transform 1s;
        font-size: 25px;
        color: #999999;
    }

    .xx, .y {
        color: #f90000;
        font-size: 25px;
        /* font-weight: bold; */
    }

    .login {
        font-size: 12px;
        border-radius: 3px;
        background: #485968;
        width: 93px;
        height: 48px;
        font-size: 25px;
        color: #8394a3;
    }
    .login:hover {
        background: #51697e;
        border-color: #66b1ff;
        color: #b8c4cf;
    }
</style>
</html>
